<template>

   <div class="detail">
        <div style="float: left;width: 100%;height:50px;background-color:#f2ffeb">
            <div style="margin-top:12px;margin-left:10px;font-weight:bold;font-family: '微软雅黑';letter-spacing:3px;color:#85ad8b;font-size:18px;" slot="left">我的关注</div>
        </div>

               <div style="float: left;width: 100%;margin-top:5px">

               <mt-navbar class="page-part" v-model="selected">
                  <mt-tab-item id="1">用户</mt-tab-item>
                  <mt-tab-item id="2">话题</mt-tab-item>

      
              </mt-navbar>
               <div class="line6"></div>
               <mt-tab-container v-model="selected">

<!--用户-->
        <mt-tab-container-item id="1" style="text-align:left">
        <div v-for="(item,index) in book_name1" class="imgDiv" @click="togo(index)">      
                    <div class="cricle"></div>
                    <div class="hua" style="margin-top:5%;" >{{book_name1[index]}}</div>
                     <div class="line7" style="margin-top:15%;opacity:0.5;"></div>           
         </div>

      </mt-tab-container-item>

<!--话题-->
      <mt-tab-container-item id="2" style="">
          
       
        <div v-for="(item,index) in huati" class="imgDiv" @click="togo1(index)">      
          <div class="cricle"></div>
                    <div class="hua" style="margin-top:5%;text-align:left;" >{{huati[index]}}</div>
                    <div class="hua1" style="text-align:left;position: relative;margin-top:10%;margin-left:63px;" >{{huatijj[index]}}</div>
                     <div class="line7" style="margin-top:5%;opacity:0.5;"></div>
                                 
         </div>
      </mt-tab-container-item>

    </div>

              

   </div>
</template>

<script>
    export default{
        data(){
            return{
                 selected: '1',
                 img:[
                    "./src/assets/h1.jpg",
                 ],
                huati:[ 
                    "数学","英语"
                ],
                huatijj:[
                    "数学是关于数量、结构、变化等主题的探索。","英语学习方法，技巧等一切与英语学习相关的问答。"
                ],
                book_name:[
                    "来自小菠萝的SUKI",""
                ],
                 book_question:[
                    " 大一高数如何学习？"
                ],
                 book_answer:[
                    "中学的教学方式和方法与大学有质的差别，中学的学习学生是在教师的直接指导下进行模仿和单一性的学习，大学则是在..."

                
                ],
                  book_engName:[
                    "booo_1"
                ],

                 book_name1:[
                     "来自小菠萝的SUKI","巴拉巴拉","王小波"
                ],          
                book_question1:[
                    " 大一高数如何学习？"
                ],
                 book_answer1:[
                    "中学的教学方式和方法与大学有质的差别，中学的学习学生是在教师的直接指导下进行模仿和单一性的学习，大学则是在..."
                ],
                book_engName1:[
                    "booo_1",
                ],

                 book_name2:[
                     "来自小菠萝的SUKI"
                ],          
                book_question2:[
                    " 大一高数如何学习？","div中如何设置文字居中？","在ae中如何做视频变速？"
                ],
                 book_answer2:[
                    "中学的教学方式和方法与大学有质的差别，中学的学习学生是在教师的直接指导下进行模仿和单一性的学习，大学则是在..."
                ],
                book_engName2:[
                    "booo_1","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ]
            }
        },
        methods:{
             getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            },
            togo1(index){
                var id=this.book_engName[index];
                this.go(id);
            },
            togo2(index){
                var id=this.book_engName[index];
                this.go(id);
            }
        }
    }
</script>

<style>
    .detail{
        background-color:#ffffff;
        height: auto;
       
        padding-bottom:200%;
        margin-bottom:-18%;
    }



    .detail .imgDiv {
        width:100%;     
        
        float: left;
        
    }

    .detail img {
        
        width: 29.5%;
        height: auto;
        margin-left:-65%; 
        
    }

  
    .detailauthor {
       margin-top: 7%;
       font-family: 华文行楷;
       font-size: 1em;
        color:#FF9900;

        
    }

    .detailname {
       margin-top:-35%; 
       font-family: 华文行楷;
      
       font-size: 1.5em;
       color:#FF9900;
        
    }


    .dbtn {
        position: relative;
        color:#339933;background-color:white;border-color:#339933;border-width:1px;    
        left:10%;   
        margin-top:145%;
      
    }
    
     .wenwen1{
         position: relative;
         color:#339933;
         font-size:110%;
         margin-top:-10%;
         margin-left:-40%;
     }

    .xuekeke{
        position:relative;
        color: #339933;
        margin-top:60%;
        font-size:190%;
        margin-right:23%;
        letter-spacing: 1px;
    }

    .guanguan{
        position: relative;
        color:#339933;
       
        margin-top:10%;
        margin-left:-15%;
    }

    .jiajia{
        width: 90%;
        color:#339933;
        float: right;
        height: 20px;
    }

     .xiabiao{
        position:relative;
        color:gray;
        margin-top:38%;
        font-size: 80%;
        margin-left:50%;
       
    }
    .line6 {
        border-top: 1px solid #c0c0c0;
        height: 4px;
        margin-top:0.1%;
        margin-left:-7%;
    }
    .line7 {
        position: relative;
        border-top: 1px solid #c0c0c0;
        height: 14px;
        margin-top:-54%;
        margin-left:-7%;
    }
    .line8 {
        position: relative;
        border-top: 1px solid #c0c0c0;
        height: 14px;
        margin-top:-54%;
        margin-left:-7%;
    }
    .huati1{

    }
    .huatib{
      width:230px;
      height:230px;
      position: relative;
      margin-right:-50px;
      margin-top: 20px;

    }
</style>